<template>
	<div class="recommentItem position-relative" :style="coverSizeStyle" @click="$emit('onClickCover')">
		<div
			class="recommendItemImg start-0 top-0 position-absolute rounded-4 cursor-pointer overflow-hidden position-relative"
			:style="{ backgroundImage: `url('${picUrl}')` }"
		>
			<div v-if="playCount" class="playCountLine position-absolute d-flex align-items-center">
				<HollowPlayIcon width="12" height="12" />
				<span class="text-white ms-1 flex-shrink-0">{{ playCount_filter(playCount) }}</span>
			</div>
			<div
				@click.stop="$emit('onClickPlay')"
				class="position-absolute rounded-circle hover-play justify-content-center align-items-center"
				:style="playIconPosition + playContainerSizeStyle"
			>
				<div :style="playIconSizeStyle" class="trigonalPlay"></div>
			</div>
			<div v-if="updateFrequency" class="updateFrequency position-absolute start-50 translate-x--50 text-white">
				{{ updateFrequency }}
			</div>
			<div
				v-if="creator.nickname !== undefined"
				style="z-index: 1"
				class="text-white fs-6 position-absolute start-0 bottom-0 px-2 my-1 d-flex align-items-center w-100 box-border"
			>
				<UserIcon width="13" height="13" />
				<span class="mx-1 text-ellipsis" style="max-width: 70%">{{ creator.nickname }}</span>
				<img v-if="creator?.avatarDetail" width="14" height="14" :src="creator.avatarDetail.identityIconUrl" alt="" />
			</div>
		</div>
		<div v-if="name" class="recTitle position-absolute start-0 bottom-0 w-100 fs-5">{{ name }}</div>
	</div>
</template>
<script lang="ts">
import { playCount as playCount_filter } from "@/utils/filters";
import { computed, PropType, reactive, toRefs } from "vue";
type Placement = "rightBottom" | "center";
export default {
	emits: ["onClickCover", "onClickPlay"],
	props: {
		picUrl: {
			type: String,
			default: "",
		},
		playCount: {
			type: Number,
			default: 0,
		},
		name: {
			type: String,
			default: "",
		},
		placement: {
			type: String as PropType<Placement>,
			default: "rightBottom",
		},
		size: {
			type: [Number, String],
			default: 0,
		},
		playSize: {
			type: [Number, String],
			default: 28,
		},
		playTranslate: {
			type: String,
			default: "-25%",
		},
		updateFrequency: {
			type: String,
			default: "",
		},
		paddingSize: {
			type: String,
			default: "18%",
		},
		creator: {
			type: Object,
			default: {},
		},
	},
	setup(props, context) {
		const rightBottomPostion = "right: 6px;bottom: 6px;";
		const centerPosition = "left: 50%;top: 50%;transform: translate(-50%,-50%);";
		const state = reactive({
			playIconPosition: computed(() => {
				if (props.placement === "rightBottom") return rightBottomPostion;
				if (props.placement === "center") return centerPosition;
			}),
			playContainerSizeStyle: computed(() => {
				return `width: ${props.playSize}px;height: ${props.playSize}px;`;
			}),
			playIconSizeStyle: computed(() => {
				let sizeScalePercent = Number(props.playSize) / 28;
				return `border-top: 6.4px solid transparent;
						border-right: 6.4px solid transparent;
						border-bottom: 6.4px solid transparent;
						transform: translate(${props.playTranslate}) scale(${sizeScalePercent})`;
			}),
			coverSizeStyle: computed(() => {
				if (props.size) {
					return `width:${props.size}px;height:${props.size}px;`;
				} else {
					if (props.name) {
						return `padding-left: ${props.paddingSize};padding-top: calc(${props.paddingSize} + 4.5rem);`;
					} else {
						return `padding-left: ${props.paddingSize};padding-top: ${props.paddingSize};`;
					}
				}
			}),
		});
		return {
			...toRefs(state),
			playCount_filter,
			console: window.console,
		};
	},
};
</script>

<style lang="scss" scoped>
.recommentItem {
	// margin-right: 2%;
	.recommendItemImg {
		padding-left: 100%;
		padding-top: 100%;
		background-color: #ccc;
		background-size: cover;
		background-repeat: no-repeat;
		* {
			z-index: 3;
		}
		.playCountLine {
			top: 3px;
			right: 8px;
		}
		.hover-play {
			display: none;
			/* width: 28px;
			height: 28px; */
			opacity: 0;
			background-color: rgba($color: #fff, $alpha: 0.85);
			.trigonalPlay {
				margin-left: 50%;
				/* border-top: 6.4px solid transparent;
				border-right: 6.4px solid transparent;
				border-bottom: 6.4px solid transparent; */
				/* transform: translateX(30%); */
			}
		}
		&:after {
			left: 0;
			top: 0;
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			background-image: radial-gradient(transparent, rgba($color: #000000, $alpha: 0.1));
			z-index: 2;
		}
		&:hover {
			.hover-play {
				display: flex;
				animation: opacityShow 0.6s;
				animation-fill-mode: forwards;
			}
			@keyframes opacityShow {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}
		}
		.updateFrequency {
			top: 65%;
		}
	}
	.recTitle {
		// min-height: 50px;
		// height: 5%;
		@include ellipsis(2);
		min-height: 4rem;
		bottom: 0;
	}
}
.primaryTheme {
	.trigonalPlay {
		border-left: calc(12px * 0.8) solid $primary;
	}
}
.darkTheme {
	.trigonalPlay {
		border-left: calc(12px * 0.8) solid $dark;
	}
}
.freeTheme {
	.trigonalPlay {
		border-left: calc(12px * 0.8) solid $free;
	}
}
</style>
